<template>
    <div class="qrcode">
      <el-col :md="24">
            <el-col :md="8" :xs="1" class="perchbox"></el-col>
            <el-col :md="8" :xs="22" class="perchbox qrcode-body-box">
                  <div class="qrcode-top-menu" @click="openMenu()"><i class="el-icon-s-unfold"></i></div>
                  <h4 class="transitionTextBg qrcode-top">
                        二饭的二维码工具
                  </h4>
                  <el-col :md="24" class="qrcode-body app-pointer">
                        <el-col :md="12" :xs="12" class="qrcode-body-item" :class="activeIndex==1?'qrcode-active':''" @click.native="onMenu(1)">生成二维码</el-col>
                        <el-col :md="12" :xs="12" class="qrcode-body-item" :class="activeIndex==2?'qrcode-active':''" @click.native="onMenu(2)">解析二维码</el-col>
                  </el-col>
                  <el-col :span="24" class="qrcode-body-content" v-if="activeIndex==1">
                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="镶嵌在二维码中间的LOGO,支持PNG、JPG" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    LOGO图片：
                              </el-col>
                              <el-col :span="16" class="content-right">
                                    <input id="logo" type="file" style="width:150px;" @change="uploadChange()" ref="inputer" multiple accept="image/png, image/jpeg">
                              </el-col>
                        </el-col>

                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="是否对LOGO图片进行压缩" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    LOGO压缩：
                              </el-col>
                              <el-col :span="16" class="content-right">
                                    <el-switch v-model="isCompress" active-color="#0A9EFF" inactive-color="#EAECEE"></el-switch>
                              </el-col>
                        </el-col>

                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="要写入二维码的数据" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    二维码内容：
                              </el-col>
                              <el-col :span="16" class="content-right"><el-input v-model="content" size="small" placeholder="请输入内容"></el-input></el-col>
                        </el-col>
                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    前景色：
                              </el-col>
                              <el-col :span="16" class="content-right"><el-color-picker v-model="color"></el-color-picker></el-col>
                        </el-col>

                        <el-col :span="24">
                              <el-col :span="8" class="content-left">背景色：</el-col>
                              <el-col :span="16" class="content-right"><el-color-picker v-model="bgc"></el-color-picker></el-col>
                        </el-col>

                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="纠错等级越高越不易识别" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    纠错等级：
                              </el-col>
                              <el-col :span="16" class="content-right">
                                    <el-slider v-model="level" :min="25" :max="100" :step="25" show-stops></el-slider>
                              </el-col>
                        </el-col>

                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="二维码的空白边缘宽度" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    二维码边缘：
                              </el-col>
                              <el-col :span="16" class="content-right">
                                    <el-slider v-model="margin" :step="10" show-stops></el-slider>
                              </el-col>
                        </el-col>

                        <el-col :span="24">
                              <el-col :span="8" class="content-left">二维码尺寸：</el-col>
                              <el-col :span="16" class="content-right">
                                    <el-slider
                                          v-model="size"
                                          :min="100"
                                          :max="1000">
                                    </el-slider>
                              </el-col>
                        </el-col>


                        <el-col :span="24" v-if="isShow">
                              <el-col :span="8" class="content-left">二维码预览：</el-col>
                              <el-col :span="16" class="content-right"><a :href="res" target="_blank">点击查看二维码</a></el-col>
                        </el-col>
                        <el-col :span="24" style="padding-top:5px;">
                              <el-col :span="12">
                                    <el-button type="primary" round size="medium" style="padding:12px 50px;" @click="reset">重置</el-button>
                              </el-col>
                              <el-col :span="12">
                                    <el-button type="primary" round size="medium" style="padding:12px 50px;" @click="submit">完成</el-button>
                              </el-col>
                        </el-col>
                  </el-col>
                  <el-col :span="24" class="qrcode-body-content" v-if="activeIndex==2">
                        <el-col :span="24">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="请选择含有二维码的图片" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    二维码图片：
                              </el-col>
                              <el-col :span="16" class="content-right">
                                    <input id="logo" type="file" style="width:150px;" @change="uploadChange()" ref="inputer" multiple accept="image/png, image/jpeg">
                              </el-col>
                        </el-col>
                        <el-col :span="24" v-if="isShow">
                              <el-col :span="8" class="content-left">
                                    <el-tooltip class="item" effect="dark" content="解析出来的二维码数据" placement="top-start">
                                          <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    二维码数据：
                              </el-col>
                              <el-col :span="16" class="content-right">
                                    <el-input type="textarea" autosize placeholder="解析结果" v-model="parseData"></el-input>
                              </el-col>
                        </el-col>
                        <el-col :span="24" style="padding-top:40px;">
                              <el-col :span="12">
                                    <el-button type="primary" round size="medium" style="padding:12px 50px;" @click="reset">重置</el-button>
                              </el-col>
                              <el-col :span="12">
                                    <el-button type="primary" round size="medium" style="padding:12px 50px;" @click="parseSubmit">完成</el-button>
                              </el-col>
                        </el-col>
                  </el-col>
            </el-col>
            <el-col :md="8" :xs="1" class="perchbox"></el-col>
      </el-col>

      <!-- 菜单 -->
      <el-drawer title="菜单" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
            <div class="qrcode-drawer-content">
                  <div class="qrcode-menu-item">
                        <el-link type="primary" @click.native="openQRCodeList()">历史生成</el-link>
                  </div>
                  <div class="qrcode-menu-item">
                        <el-link type="primary" @click.native="openParseList()">历史解析</el-link>
                  </div>
                  <div class="qrcode-menu-item">
                        <el-link type="danger" @click.native="clearParseList()">清空记录</el-link>
                  </div>
            </div>
            <div class="qrcode-drawer-footer">
                  <el-button type="danger" plain @click="logOut()">退出系统</el-button>
            </div>
      </el-drawer>

      <!-- 数据列表 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" width="90%" :center=true>
            <el-table :data="tableList" :fit=true>
                  <el-table-column type="index" label="索引"></el-table-column>
                  <el-table-column property="date" label="日期"></el-table-column>
                  <el-table-column property="result" label="结果">
                        <template slot-scope="scope">
                              <el-input v-if="dialogTitle=='二维码历史解析'" type="textarea" autosize placeholder="结果内容" v-model="scope.row.result"></el-input>
                              <el-link v-else type="success" :href="scope.row.result" target="_blank">二维码链接</el-link>
                        </template>
                  </el-table-column>
            </el-table>
      </el-dialog>
    </div>
</template>
























<script>
export default {
      props: [],
      data() {
            return {
                  activeIndex:1,
                  isCompress:true,
                  level:25,
                  margin:10,
                  content:'',
                  size:300,
                  logo:[],
                  color:'#000000',
                  bgc:'#ffffff',
                  res:'',
                  isShow:false,
                  parseData:'',
                  drawer:false,// 菜单是否打开
                  direction:'ltr',
                  tableList:[],// 数据表格
                  dialogTableVisible:false, // 数据表格是否显示
                  dialogTitle:'历史生成'
            }
      },
      methods:{
            /**打开菜单 */
            openMenu(){
                  this.drawer=true;
            },
            /**上传LOGO文件 */
            uploadChange(){
                  const that=this;
                  let inputDOM = this.$refs.inputer;
                  this.logo = inputDOM.files;
                  
                  let len=this.logo.length;// 图片个数
                  if(len>1){
                        this.$message({
                              message: '一次只能上传一个文件',
                              type: 'warning'
                        });
                        that.logo=[]
                        return;
                  }
                  let size = Math.floor(this.logo[0].size / 1024);// 图片大小
                  if (size > 5*1024*1024) {
                        this.$message({
                              message: '请选择5MB以内的文件',
                              type: 'warning'
                        });
                        that.logo=[]
                        return;
                  }

                  const fileType=['jpg','png'];
                  let name=this.fil[0].name; // 图片名字
                  name=name.substring(name.lastIndexOf('.')+1);
                  if(fileType.indexOf(name)==-1){
                        this.$message({
                              message: '不支持该文件类型',
                              type: 'warning'
                        });
                        that.logo=[]
                        return;
                  }
            },
            /**提交按钮事件 */
            submit(){
                  const that=this;
                  if(that.content==''){
                        that.$message({
                              message:'二维码内容不能为空！',
                              type:"info"
                        })
                        return;
                  }

                  this.$confirm('是否确定按当前配置生成二维码?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        customClass: 'myClass'
                  }).then(() => {
                        that.submitData();
                  }).catch(() => {
                        this.$message({
                              type: 'info',
                              message: '已取消提交'
                        });          
                  });
            },
            /**提交生成二维码数据到服务器 */
            submitData(){
                  const that=this;
                  that.$root.loading=true;
                  // 初始化数据
                  let level=this.getLevel();
                  let formData=new FormData();
                  if(this.logo.length!=0){
                        formData.append("logo",this.logo[0]);
                  }
                  formData.append("content",that.content);
                  formData.append("isCompress",that.isCompress);
                  formData.append("level",level);
                  formData.append("margin",that.margin/10);
                  formData.append("size",that.size);
                  formData.append("color",that.color);
                  formData.append("bgc",that.bgc);

                  this.$axios({
                        method: 'post',
                        url: this.$url+`/api/qrcode/encode`,
                        data: formData,
                        headers: {
                              'Content-Type': 'multipart/form-data'
                        }
                  }).then(res=>{
                        that.$root.loading=false;
                        if(res.data.status.code==200){
                              that.res=res.data.data.filePath;
                              that.isShow=true;
                              that.$message({
                                    message:'生成二维码成功',
                                    type:"success"
                              })
                              that.setQRCode(that.res);
                        }else{
                              that.$message({
                                    message:'服务器繁忙，请联系管理员',
                                    type:"error"
                              })
                        }

                  })
            },

            /**将生成的二维码放入缓存 */
            setQRCode(addr){
                  let date=new Date();
                  date=date.getMonth()+1+"月"+date.getDate()+"日 "+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒"


                  let qrcodeArray=localStorage.getItem("qrcodeArray");
                  qrcodeArray=JSON.parse(qrcodeArray)||[];
                  let qrcodeData={
                        date:date,
                        result:addr
                  }
                  qrcodeArray.push(qrcodeData);
                  qrcodeArray=JSON.stringify(qrcodeArray);
                  localStorage.setItem("qrcodeArray",qrcodeArray);
            },
            /**将解析记录放入缓存 */
            setParseList(parse){
                  let date=new Date();
                  date=date.getMonth()+1+"月"+date.getDate()+"日 "+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒"
                  let qrcodeArray=localStorage.getItem("qrcodeParseArray");
                  qrcodeArray=JSON.parse(qrcodeArray)||[];
                  let qrcodeData={
                        date:date,
                        result:parse
                  }
                  qrcodeArray.push(qrcodeData);
                  qrcodeArray=JSON.stringify(qrcodeArray);
                  localStorage.setItem("qrcodeParseArray",qrcodeArray);
            },
            /**查看缓存中二维码列表 */
            openQRCodeList(){

                  let qrcodeArray=localStorage.getItem("qrcodeArray");
                  qrcodeArray=JSON.parse(qrcodeArray)||[];
                  this.dialogTitle="二维码历史生成";
                  this.tableList=qrcodeArray;
                  this.dialogTableVisible=true
                  this.drawer=false;

            },

            /**查看缓存中解析列表 */
            openParseList(){
                  let qrcodeArray=localStorage.getItem("qrcodeParseArray");
                  qrcodeArray=JSON.parse(qrcodeArray)||[];
                  this.dialogTitle="二维码历史解析";
                  this.tableList=qrcodeArray;
                  this.dialogTableVisible=true
                  this.drawer=false;
            },

            /**返回二维码纠错等级 */
            getLevel(){
                  if(this.level==25){
                        return 'H'
                  }else if(this.level==50){
                        return 'Q'
                  }else if(this.level==75){
                        return 'M'
                  }else if(this.level==100){
                        return 'L'
                  }else{
                        return 'H'
                  }
            },
            /**重置表单 */
            reset(){
                  let reset={
                        isCompress:true,
                        level:25,
                        margin:10,
                        content:'',
                        size:300,
                        logo:[],
                        color:'#000000',
                        bgc:'#ffffff',
                        res:'',
                        isShow:false
                  }
                  //     Object.assign(this.$data, this.$options.data())
                  Object.assign(this.$data, reset);
                  this.$refs.inputer.value='';
            },
            /** 切换菜单 */
            onMenu(index){
                  this.activeIndex=index;
                  this.reset();
            },
            /**提交解析 */
            parseSubmit(){
                  const that=this;
                  if(this.logo.length==0){
                        return
                  }
                  that.$root.loading=true;
                  let formData=new FormData();
                  if(this.logo.length!=0){
                        formData.append("file",this.logo[0]);
                  }

                  this.$axios({
                        method: 'post',
                        url: this.$url+`/api/qrcode/decode`,
                        data: formData,
                        headers: {
                              'Content-Type': 'multipart/form-data'
                        }
                  }).then(res=>{
                        that.$root.loading=false;
                        if(res.data.status.code==200){
                              that.parseData=res.data.data.result;
                              that.isShow=true;
                              that.$message({
                                    message:'操作成功',
                                    type:"success"
                              })
                              that.setParseList(that.parseData);
                        }else{
                              that.$message({
                                    message:'服务器繁忙，请联系管理员',
                                    type:"error"
                              })
                        }

                  })
            },
            /**关闭侧边抽屉 */
            handleClose(){
                  this.drawer=false;
            },
            /**退出 */
            logOut(){
                  this.$router.push('/index');
            },
            /**清空记录 */
            clearParseList(){
                  localStorage.removeItem("qrcodeParseArray");
                  localStorage.removeItem("qrcodeArray");
                  this.$message({
                        message:'已清除记录',
                        type:"info"
                  })
            }
    }
};
</script>












<style lang="less" scope>
      // 菜单
      .qrcode-menu-item{
            height: 8vh;
            line-height: 8vh;
            border-bottom: 1px solid #E6E6E2;
      }
      .qrcode-drawer-content{
            height: 80vh;
      }
      .qrcode-drawer-footer{
            height: 10vh;
      }

      .qrcode-body-box{
            position: relative;
      }
      .qrcode-top-menu{
            position:absolute;
            top: 10px;
            left: 0px;
            z-index: 999;
            font-size: 24px;
      }




      .el-slider{
            padding-top:5px; 
      }
      a{
            color: #00BEFF;
      }
      .myClass{
            width: 300px;
      }




      .qrcode{
            width: 100vw;
            height: 100vh;
            font-size: 1rem;
            
            .qrcode-top{
                  padding-top: 10px;
                  height: 15vh;
                  font-size: 17px;
            }
            .qrcode-body{

                  border-bottom: 1px solid #E6E6E4;
                  .qrcode-body-item{
                        padding: 5px 0;

                  }

                  .qrcode-active{
                        border-bottom: 2px solid #2A9EFF;
                  }
                  .qrcode-body-item:hover{
                        border-bottom: 2px solid #2A9EFF;
                  }
            }
            .qrcode-body-content{
                  padding-top: 10px;
                  font-size: 0.8rem;
                  .content-left{
                        text-align: right;
                        line-height: 50px;
                        i{
                              cursor:help;
                        }
                  }
                  .content-right{
                        text-align: left;
                        line-height: 50px;
                        width: 64%;
                  }
                  .qrcode-logo{
                        width: 50px;
                  }
            }
    }
</style>